<template>
  <div class="box">
    <aside-box>
      <template #zh> 进度图 </template>
      <template #en> progress chart </template>
      <div class="progress" ref="progressRef"></div>
    </aside-box>
  </div>
</template>

<script lang="ts" setup>
import asideBox from "@/components/asideBox";
import * as echarts from "echarts";

let max = 100; //满刻度大小

const chartData = ref([
  { name: "课题1", value: 20 },
  { name: "课题2", value: 30 },
  { name: "课题3", value: 40 },
  { name: "课题4", value: 60 },
  { name: "课题5", value: 70 },
  { name: "课题6", value: 85 },
  { name: "课题7", value: 95 },
]);

const option = {
  // title: [
  //   {
  //     text: 60 + "%",
  //     left: "50%",
  //     top: "70%",
  //     textAlign: "center",
  //     textStyle: {
  //       // fontWeight: 'normal',
  //       fontSize: 12,
  //       color: "#2DF290",
  //       textAlign: "center",
  //     },
  //   },
  //   {
  //     text: "完成占比",
  //     left: "50%",
  //     top: "45%",
  //     textAlign: "center",
  //     textStyle: {
  //       color: "#fff",
  //       fontWeight: "normal",
  //       fontSize: "12",
  //       textAlign: "center",
  //     },
  //   },
  // ],
  color: [
    "rgba(255, 102, 41,1)",
    "rgba(255, 182, 10,1)",
    "rgba(255, 240, 143,1)",
    "rgba(96, 184, 46,1)",
    "rgba(28, 197, 145,1)",
    "rgba(37, 85, 244,1)",
    "rgba(45, 160, 255,1)",
  ],
  legend: {
    orient: "vertical",
    top: "10%",
    left: "6%",
    itemGap: 20,
    itemHeight: 15,
    icon: "circle",
    data: chartData.value.map((item) => item.name),
    // 自定义更改图例显示
    formatter: (name) => {
      let data = chartData.value;
      let target;
      for (let i = 0; i < data.length; i++) {
        if (data[i].name === name) {
          target = data[i].value;
        }
      }
      return [`{name|${name}}`, `{value|${target}}人`].join("\n");
    },
    textStyle: {
      fontWeight: "normal",
      color: "#BFE7F9",
      textBorderColor: "transpartent",
      fontSize: 12,
      fontFamily: "阿里妈妈数黑体 Bold",
      // 添加
      rich: {
        name: {
          fontSize: 12,
          width: 30,
          color: "#fff",
        },
        target: {
          color: "#BFE7F9",
          align: "center",
        },
      },
    },
  },
  series: [
    {
      name: "课题1",
      type: "pie",
      startAngle: 180,
      radius: ["50%", "60%"], // 圆弧大小
      center: ["65%", "95%"], // 位置
      hoverAnimation: false,
      labelLine: {
        show: false,
      },
      data: [
        {
          name: "",
          value: 20,
          itemStyle: {
            normal: {
              show: true,
              color: "rgba(255, 102, 41,1)",
            },
          },
        },
        {
          //画中间的图标
          name: "",
          value: 0,
        },
        {
          //画剩余的刻度圆环
          name: "",
          value: max - 20,
          itemStyle: {
            color: "rgba(255, 102, 41,0.1)",
          },
        },
        {
          // 画剩余的刻度圆环
          name: "",
          value: 100,
          itemStyle: {
            color: "rgba(255, 102, 41,0)",
          },
        },
      ],
    },
    {
      name: "课题2",
      type: "pie",
      startAngle: 180,
      radius: ["70%", "80%"], // 圆弧大小
      center: ["65%", "95%"], // 位置
      hoverAnimation: false,
      labelLine: {
        show: false,
      },
      data: [
        {
          name: "",
          value: 30,
          itemStyle: {
            normal: {
              show: true,
              color: "rgba(255, 182, 10,1)",
            },
          },
        },
        {
          //画中间的图标
          name: "",
          value: 0,
        },
        {
          //画剩余的刻度圆环
          name: "",
          value: max - 30,
          itemStyle: {
            color: "rgba(255, 182, 10,0.1)",
          },
        },
        {
          // 画剩余的刻度圆环
          name: "",
          value: 100,
          itemStyle: {
            color: "rgba(255, 102, 41,0)",
          },
        },
      ],
    },
    {
      name: "课题3",
      type: "pie",
      startAngle: 180,
      radius: ["90%", "100%"], // 圆弧大小
      center: ["65%", "95%"], // 位置
      hoverAnimation: false,
      labelLine: {
        show: false,
      },
      data: [
        {
          name: "",
          value: 40,
          itemStyle: {
            normal: {
              show: true,
              color: "rgba(255, 240, 143,1)",
            },
          },
        },
        {
          //画中间的图标
          name: "",
          value: 0,
        },
        {
          //画剩余的刻度圆环
          name: "",
          value: max - 40,
          itemStyle: {
            color: "rgba(255, 240, 143,0.1)",
          },
        },
        {
          // 画剩余的刻度圆环
          name: "",
          value: 100,
          itemStyle: {
            color: "rgba(255, 102, 41,0)",
          },
        },
      ],
    },
    {
      name: "课题4",
      type: "pie",
      startAngle: 180,
      radius: ["110%", "120%"], // 圆弧大小
      center: ["65%", "95%"], // 位置
      hoverAnimation: false,
      labelLine: {
        show: false,
      },
      data: [
        {
          name: "",
          value: 60,
          itemStyle: {
            normal: {
              show: true,
              color: "rgba(96, 184, 46,1)",
            },
          },
        },
        {
          //画中间的图标
          name: "",
          value: 0,
        },
        {
          //画剩余的刻度圆环
          name: "",
          value: max - 60,
          itemStyle: {
            color: "rgba(96, 184, 46,0.1)",
          },
        },
        {
          // 画剩余的刻度圆环
          name: "",
          value: 100,
          itemStyle: {
            color: "rgba(255, 102, 41,0)",
          },
        },
      ],
    },
    {
      name: "课题5",
      type: "pie",
      startAngle: 180,
      radius: ["130%", "140%"], // 圆弧大小
      center: ["65%", "95%"], // 位置
      hoverAnimation: false,
      labelLine: {
        show: false,
      },
      data: [
        {
          name: "",
          value: 70,
          itemStyle: {
            normal: {
              show: true,
              color: "rgba(28, 197, 145,1)",
            },
          },
        },
        {
          //画中间的图标
          name: "",
          value: 0,
        },
        {
          //画剩余的刻度圆环
          name: "",
          value: max - 70,
          itemStyle: {
            color: "rgba(28, 197, 145,0.1)",
          },
        },
        {
          // 画剩余的刻度圆环
          name: "",
          value: 100,
          itemStyle: {
            color: "rgba(255, 102, 41,0)",
          },
        },
      ],
    },
    {
      name: "课题6",
      type: "pie",
      startAngle: 180,
      radius: ["150%", "160%"], // 圆弧大小
      center: ["65%", "95%"], // 位置
      hoverAnimation: false,
      labelLine: {
        show: false,
      },
      data: [
        {
          name: "",
          value: 85,
          itemStyle: {
            normal: {
              show: true,
              color: "rgba(37, 85, 244,1)",
            },
          },
        },
        {
          //画中间的图标
          name: "",
          value: 0,
        },
        {
          //画剩余的刻度圆环
          name: "",
          value: max - 85,
          itemStyle: {
            color: "rgba(37, 85, 244,0.1)",
          },
        },
        {
          // 画剩余的刻度圆环
          name: "",
          value: 100,
          itemStyle: {
            color: "rgba(255, 102, 41,0)",
          },
        },
      ],
    },
    {
      name: "课题7",
      type: "pie",
      startAngle: 180,
      radius: ["170%", "180%"], // 圆弧大小
      center: ["65%", "95%"], // 位置
      hoverAnimation: false,
      labelLine: {
        show: false,
      },
      data: [
        {
          name: "",
          value: 95,
          itemStyle: {
            normal: {
              show: true,
              color: "rgba(45, 160, 255,1)",
            },
          },
        },
        {
          //画中间的图标
          name: "",
          value: 0,
        },
        {
          //画剩余的刻度圆环
          name: "",
          value: max - 95,
          itemStyle: {
            color: "rgba(45, 160, 255,0.1)",
          },
        },
        {
          // 画剩余的刻度圆环
          name: "",
          value: 100,
          itemStyle: {
            color: "rgba(255, 102, 41,0)",
          },
        },
      ],
    },
  ],
};

const [progressRef] = useEcharts(option);
</script>

<style lang="scss" scoped>
.box {
  background: rgb(8, 32, 63);
  .progress {
    width: 100%;
    height: 200px;
  }
}
</style>